<script setup lang="ts">
import { type PropType, type VNode } from "vue";

defineOptions({ name: "toggle-button" });
const props = defineProps({
  type: { type: String as PropType<"default" | "primary" | "text" | "dashed" | "link" | "ghost"> },
  size: { type: String as PropType<"large" | "middle" | "small"> },
  shape: { type: String as PropType<"default" | "circle" | "round"> },
  icon: { type: Object as PropType<VNode> },
  htmlType: { type: String },
  disabled: { type: Boolean, default: () => undefined },
  loading: { type: Boolean, default: () => undefined },
  block: { type: Boolean, default: () => undefined },
  danger: { type: Boolean, default: () => undefined },

  checked: { type: Boolean, default: () => undefined },
});

const emits = defineEmits<{
  (e: "update:checked", checked: boolean): void;
}>();

const onClick = async () => {
  emits("update:checked", !props.checked);
};
</script>

<template>
  <a-button
    :type="type"
    :size="size"
    :danger="danger"
    :icon="icon"
    :shape="shape"
    :html-type="htmlType"
    :loading="loading"
    :disabled="disabled"
    :class="['toggle-button', checked && 'is-checked']"
    @click="onClick"
  >
    <slot />
    <span v-if="checked" class="toggle-button-outline"></span>
  </a-button>
</template>

<style lang="less">
.toggle-button {
  position: relative;

  &-outline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    box-sizing: border-box;
    border: 2px solid var(--color-primary);
    overflow: hidden;

    &:after {
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      border: 3px solid transparent;
      border-bottom-color: var(--color-primary);
      border-right-color: var(--color-primary);
    }
  }

  &.is-checked {
    color: var(--color-primary);
    border-color: transparent;
  }
}
</style>
